<template>
    <view>
        <view class="main-admin">
            <view class="form-box-main">
                <view class="form-box shadow">
                    <!--
			<view class="form-group">
				<view class="title must">样式</view>
				<cmpt-picker mark="cover" style="flex:1" model:item="{{mode}}" sourceDataStr="upimg=上图下文样式,leftbig=左图右文样式,bigtext=大标题样式" />
			</view> 
			 -->

                    <view class="form-group">
                        <view class="action text-bold text-l">简要描述</view>
                        <view class="action">{{ desc.length }}/100</view>
                    </view>
                    <view class="form-group align-start">
                        <textarea
                            name="content"
                            placeholder-class="phc"
                            placeholder="填写简要描述"
                            style="height: 150rpx"
                            v-model="desc"
                            maxlength="100"
                            :auto-height="false"
                        ></textarea>
                    </view>

                    <view class="form-group">
                        <view class="title must">
                            封面图
                            <text class="text-normal">（必填）</text>
                        </view>
                        <view class="cover-img">
                            <image :lazy-load="true" class="loading" mode="aspectFill" v-if="pic" :src="pic" @tap="url" data-type="img" :data-url="pic"></image>
                            <view v-if="pic" class="close-img" @tap.stop.prevent="catchDelImgTap">
                                <text class="icon-refresh margin-left-xs"></text>
                                <text class="test-admin margin-left-xs" style="font-size: 32rpx">更换图片</text>
                            </view>
                            <view class="upload-img" v-if="!pic" @tap.stop.prevent="bindChooseImgTap">
                                <text class="icon-cameraadd"></text>
                                <text class="test-admin" style="font-size: 32rpx">上传图片</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="demo">
                <view class="demo-title">效果图</view>

                <view class="meet-list-box">
                    <!-- 左大图 Begin -->
                    <view :class="'item shadow item-leftbig ' + (!pic ? 'nopic' : '') + ' margin-top-xs'">
                        <image v-if="pic" mode="aspectFill" :lazy-load="true" class="leftbig-left loading" :src="pic"></image>
                        <view class="leftbig-right">
                            <view class="leftbig-title content-cut-one">{{ title || '演示标题' }}</view>
                            <view class="leftbig-desc">
                                <text class="content-cut-three">{{ desc || '简要描述未填写' }}</text>
                            </view>
                            <view class="data">
                                <view class="meet-status">
                                    <text class="icon-remind margin-right-xxs"></text>
                                    {{ status || '9天可预约' }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 左大图 END -->
                </view>
            </view>
        </view>

        <view class="btn-bottom-admin">
            <view @tap="url" data-type="back" class="return">不保存,返回</view>
            <view @tap="bindSaveTap" class="save">保存封面设置</view>
        </view>
    </view>
</template>

<script>
const AdminBiz = require('../../../../biz/admin_biz.js');
const pageHelper = require('../../../../helper/page_helper.js');
const dataHelper = require('../../../../helper/data_helper.js');
export default {
    data() {
        return {
            title: '',
            status: '',
            mode: '',
            desc: '',
            pic: '',
            formStyleSet: {}
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        if (!AdminBiz.isAdmin(this)) {
            return;
        }
        let parent = pageHelper.getPrevPage(2);
        if (!parent) {
            return;
        }
        let skin = pageHelper.getSkin();
        let formStyleSet = parent.data.formStyleSet;
        let title = parent.data.formTitle;
        let status = parent.data.beginSetDesc;
        this.setData({
            title,
            status,
            ...formStyleSet
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    methods: {
        url: function (e) {
            pageHelper.url(e, this);
        },

        bindChooseImgTap: function (e) {
            let that = this;
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'],
                //从相册选择
                success: async (res) => {
                    let pic = res.tempFiles[0].path;
                    that.setData({
                        pic
                    });
                }
            });
        },

        catchDelImgTap: function (e) {
            let that = this;
            let callback = function () {
                that.setData({
                    pic: ''
                });
            };
            pageHelper.showConfirm('确定要删除该图片吗？', callback);
        },

        bindSaveTap: function (e) {
            let parent = pageHelper.getPrevPage(2);
            if (!parent) {
                return;
            }
            if (!this.pic) {
                return pageHelper.showModal('请上传封面图片');
            }
            parent.setData({
                formStyleSet: {
                    desc: dataHelper.fmtText(this.desc),
                    pic: this.pic
                }
            });
            uni.navigateBack({
                delta: 0
            });
        }
    }
};
</script>
<style>
@import './admin_meet_cover.css';
</style>
